<template>
  <div id="bar-chart">
    <div id="bar-chart-view"></div>
  </div>
</template>

<script>
export default {
  name: 'bar-chart',
  data() {
    return {
      dataAxis: [],
      data: [],
      yMax: 0,
      dataShadow: [],
      title: '',
      option: {}
    }
  },
  methods: {
    initOption() {
      this.option = {
        title: {
          text: this.title,
        },
        tooltip: {
          axisPointer: {          
              type: 'line'     
          }
        },
        xAxis: {
          data: this.dataAxis,
          type: 'category',
          axisLabel: {
            textStyle: {
                color: '#000'
            }
          },
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLine: {
            show: true
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          { 
            type: 'bar',
            itemStyle: {
              color: 'rgba(0,0,0,0.05)'
            },
            barGap: '-100%',
            barCategoryGap: '40%',
            data: this.dataShadow,
            animation: false
          },{
            type: 'bar',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#83bff6'},
                  {offset: 0.5, color: '#188df0'},
                  {offset: 1, color: '#188df0'}
                ]
              )
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
                )
              }
            },
            data: this.data
          }
        ]
      };
    }
  },
  mounted() {
    let _this = this;
    this.yMax = parseInt(this.$store.state.data[0]);
    this.data = this.$store.state.data;
    this.dataAxis = this.$store.state.dataAxis;
    this.title = this.$store.state.title;
    this.data.forEach(element => {
      if(parseInt(element) > this.yMax) {
        this.yMax = parseInt(element);
      }
    });
    for(let i = 0; i < this.data.length; i++) {
      this.dataShadow.push(this.yMax);
    }
    this.initOption();
    let myChart = this.$echarts.init(document.getElementById('bar-chart-view'));
    myChart.setOption(this.option);
    let zoomSize = 6;
    myChart.on('click', function (params) {
      console.log(_this.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
      myChart.dispatchAction({
        type: 'dataZoom',
        startValue: _this.dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: _this.dataAxis[Math.min(params.dataIndex + zoomSize / 2, _this.data.length - 1)]
      });
    });
  },
}
</script>

<style>
  #bar-chart-view {
    width: 900;
    height: 700px;
  }
</style>